<template>
  <div class="verification">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">身份校验</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="verificationList">
      <van-field
        v-model="mobile"
        label="手机号"
        clearable
        placeholder="请输入手机号"
      />
      <van-field
        v-model="code"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
      >
      <div class="button" slot="button"  type="text" v-show="show" @click="getCode">发送验证码</div>
      <div class="button" slot="button"  type="text" v-show="!show">{{count}}s重新获取</div>
      </van-field>
    </div>
    <div class="submit" @click="addSubmit">提交</div>
  </div>
</template>
<script>
import { Field,Button  } from 'vant';
import api from '../../api/api.js'
export default {
  data(){
    return{
      code: null,
      mobile: null,
      show:true,
      count: '',
    }
  },
  created(){
    this.mobile = this.$route.query.routermobile
    this.menu()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
  //短信验证码倒计时
   CountDown(){
    this.show = false;
    this.count = 60;
    var timer = setInterval(()=>{
      this.count--;
      if(this.count<=0){
        this.show = true
        clearInterval(timer)
      }
    },1000)
   },
  getCode(){
    var reg = /^([1][0-9]{10})$/;
    if(this.mobile==null){
      this.$toast("请输入手机号码");
      return
    }
    if(!reg.test(this.mobile)){
      this.$toast("手机格式不正确");
      return
    }
    // else if(this.iscaptcha == ''){
    //     this.$vux.toast.text('请输入图形验证码')
    //     return
    // };
    this.$get(api.getCode, {
      params: {
          mobile: this.mobile,
          // captcha: this.iscaptcha
      }
      })
      .then((res) => {
        if(res.data.code===1){
          this.$toast('验证码发送成功!')
          //获取倒计时
          this.CountDown()
        }else if(res.data.code===0){
          // 验证码错误
          this.$toast(res.data.msg)
        }else if(res.data.code===2){
          //已经添加过手机
          this.$toast(res.data.msg)
          // this.iscaptcha = ''
          // this.newimg()
          // this.$router.go(-1)
        }else if(res.data.code===3){
          //验证码上限
          this.$toast(res.data.msg)
        }
      })
      .catch((error) => {
        this.$toast(error)
      });
    },
    addSubmit(){
      var reg = /^([1][0-9]{10})$/;
      if(this.mobile==null){
        this.$toast("请输入手机号码");
        return
      }
      if(!reg.test(this.mobile)){
        this.$toast("手机格式不正确");
        return
      }
      // else if(this.iscaptcha == ''){
      //     this.$vux.toast.text('请输入图形验证码!')
      //     return
      // };
      this.$get(api.phoneCode, {
        params: {
          mobile: this.mobile,
          code: this.code,
        }
        }).then((res) => {
          if(res.data.code==1){
            this.$toast('校验成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000);
            return
          }
          if(res.data.code==0){
            this.$toast(res.data.msg)
            return
          }
          if(res.data.code==2){
            //已经添加过手机
            this.$toast(res.data.msg)
            return
          }
        }).catch((error) => {
            console.log(error);
      });
    }
  },
  components: {
    [Field.name]:Field,
    [Button.name]:Button
  }
}
</script>
<style>
.van-field__button{
  padding-left: .45rem;
}
</style>
<style scoped>
.verification .van-cell:not(:last-child)::after{
  border: none;
}
.verification .van-button--info {
  color: #fff;
  background-color:#FD5585;
  border: 1px solid #FD5585;
}
.verification .van-cell{
  margin-bottom: .5rem;
  color: #000;
  /* height: 1rem;
  line-height: .6rem; */
}
.verification .verificationList{
  padding: 1.5rem .5rem;
}
.button{
  padding: 0 .1rem;
  background: #FD5585;
  color: #fff;
  font-size: .24rem;
  border-radius: 0.05rem;
}
.submit{
  position: absolute;
  left: calc(50% - 3rem);
  bottom: 5%;
  margin: 0 auto;
  width: 6rem;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
  font-weight: bold;
}
</style>

